﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<script type="text/javascript">
	$(document).ready(function(){		
		$("#btn_join").click(function(){
			if($("#name").val() == "" ){
				alert("이름을 입력하세요");
				$("#name").focus();
				return;
			}
			if($("#userid").val() == "" ){
				alert("아이디를 입력하세요");
				$("#userid").focus();
				return;
			}
			if($("#passwd").val() == "" ){
				alert("비밀번호 입력하세요");
				$("#passwd").focus();
				return;
			}
			if($("#passwd2").val() == "" ){
				alert("비밀번호 확인을 입력하세요");
				$("#passwd2").focus();
				return;
			}
			if($("#passwd2").val() != $("#passwd").val() ){
				alert("패스워드가 서로 틀립니다");
				$("#passwd]").focus();
				return;
			}
			if($("#email").val() == "" ){
				alert("이메일을 입력하세요");
				$("#email").focus();
				return;
			}
			if($("#hp").val() == "" ){
				alert("전화번호를 입력하세요");
				$("#hp").focus();
				return;
			}
			if($("#zipcode").val() == "" ){
				alert("우편번호를 입력하세요");
				$("#zipcode").focus();
				return;
			}
			if($("#address1").val() == "" ){
				alert("주소1을 입력하세요");
				$("#address1").focus();
				return;
			}
			if($("#address2").val() == "" ){
				alert("주소2를 입력하세요");
				$("#address2").focus();
				return;
			}
			if($("#idcheck").val() != "Y"){
				alert("아이디 중복 체크를 하세요");
				return;
			}
			$("#form1").submit();	
		});
		
		$("#zipcode").click(function(){
			window.open("zipcode_search.jsp", "", "width=600, height=500, scrollbars=yes");
		});

		// idcheck if문 구현하기
		$(".idcheck").click(function(){
			window.open( "userid_check.jsp", "", "width=300, height=200");
		});
		
		
	});

</script>
<script type="text/javascript">
       function previewImage(targetObj, previewId) {
        var preview = document.getElementById(previewId); //div id   
        var ua = window.navigator.userAgent;    	  

        if (ua.indexOf("MSIE") > -1) {//ie일때
            targetObj.select();            
            try {
                var src = document.selection.createRange().text; // get file full path 
                $("#img").attr("src",src);
                var ie_preview_error = document
                        .getElementById("ie_preview_error_" + previewId);
                if (ie_preview_error) {
                    preview.removeChild(ie_preview_error); //error가 있으면 delete
                }
                var img = document.getElementById(previewId); //이미지가 뿌려질 곳 

                img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
                        + src + "', sizingMethod='scale')"; //이미지 로딩, sizingMethod는 div에 맞춰서 사이즈를 자동조절 하는 역할
            } catch (e) {
                if (!document.getElementById("ie_preview_error_" + previewId)) {
                    var info = document.createElement("<p>");
                    info.id = "ie_preview_error_" + previewId;
                    info.innerHTML = "a";
                    preview.insertBefore(info, null);
                }
            }
        } else { //ie가 아닐때
            var files = targetObj.files;
            for ( var i = 0; i < files.length; i++) {

                var file = files[i];

                var imageType = /image.*/; //이미지 파일일경우만.. 뿌려준다.
                if (!file.type.match(imageType))
                    continue;

                var prevImg = document.getElementById("prev_" + previewId); //이전에 미리보기가 있다면 삭제
                if (prevImg) {
                    preview.removeChild(prevImg);
                }

                var img = document.createElement("img"); //크롬은 div에 이미지가 뿌려지지 않는다. 그래서 자식Element를 만든다.
                img.id = "prev_" + previewId;
                img.classList.add("obj");
                img.file = file;
                img.style.width = '150px'; //기본설정된 div의 안에 뿌려지는 효과를 주기 위해서 div크기와 같은 크기를 지정해준다.
                img.style.height = '150px';
                
                preview.appendChild(img);

                if (window.FileReader) { // FireFox, Chrome, Opera 확인.
                    var reader = new FileReader();
                    reader.onloadend = (function(aImg) {
                        return function(e) {
                            aImg.src = e.target.result;
                        };
                    })(img);
                    reader.readAsDataURL(file);
                } else { // safari is not supported FileReader
                    //alert('not supported FileReader');
                    if (!document.getElementById("sfr_preview_error_"
                            + previewId)) {
                        var info = document.createElement("p");
                        info.id = "sfr_preview_error_" + previewId;
                        info.innerHTML = "not supported FileReader";
                        preview.insertBefore(info, null);
                    }
                }
            }
        }
    }
</script>
</head>
<body>
<h2>회원가입</h2>
<form name="form1" id="form1" method="post" action="${path}/member/join.do"
enctype="multipart/form-data">
<table border="1" style="width:500px">
	<tr>
		<td>이름</td>
		<td><input type="text" name="name" id="name" /></td>
	</tr>
	<tr>
		<td>아이디</td>
		<td>
			<input type="text" name="userid" id="userid" class="idcheck" 
			readonly />
			<input type="button" value="아이디 중복 확인" 
				id="btnidcheck" class="idcheck" />
		</td>
	</tr>
	<tr>
		<td>비밀번호</td>
		<td><input type="password" name="passwd" id="passwd" /></td>
	</tr>
	<tr>
		<td>비밀번호 확인</td>
		<td><input type="password"  id="passwd2" /></td>
	</tr>	
	<tr>
		<td>이메일</td>
		<td><input type="text" name="email"  id="email" /></td>
	</tr>	
	<tr>
		<td>핸드폰</td>
		<td><input type="text" name="hp"  id="hp" /></td>
	</tr>		
	<tr>
		<td>우편번호</td>
		<td>
			<input type="text" name="zipcode"  id="zipcode"  readonly />
		</td>
	</tr>		
	<tr>
		<td>주소</td>
		<td>
			<input type="text" name="address1"  id="address1" size="40"	/><br>
			<input type="text" name="address2"  id="address2"  size="40" />
		</td>
	</tr>
	<tr>
		<td>사진</td>
		<td>
   			<div id='previewId'
       		 style='margin:auto;  width: 150px; height: 150px; color: black; border: 2px solid black; '>
   			 </div>
			<input type="file" id="file" name="file" onchange="previewImage(this,'previewId')">			
		</td>
	</tr>
	<tr>
		<td>프로필</td>
		<td>
			<textarea rows="3" cols="40" name="profile" id="profile"></textarea>
		</td>	
	</tr>	
	<tr align="center">
	<td colspan="2">		
			<input type="hidden" id="idcheck" />
			<input type="button" value="회원 가입"  id="btn_join"/></td>
	</tr>
</table>
</form>
</body>
</html>












